<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js"></script>
<script src="js/jquery-2.0.3.js"></script>
</head>
<body>
	<form>
		<input type="text" name="cityname" id="cityname" value="厦门"><br />
		<input type="button" value="查询天气" id="btnSearch"><br />

	</form>
	<div id="msg"></div>
	<script>
		$(function() {

			$("#btnSearch")
					.click(
							function() {

								$
										.ajax({
											type : "get",
											url : "WeatherServlet",
											data : {
												cityname : $("#cityname").val()
											},
											success : function(data) {
												console.log(data);
												if (data.resultcode == "112") {
													$("#msg").html(
															"超过每日可允许请求次数!");
												} else {
													$("#msg").html("");
													//console.log(data.result.data.weather);
													//注意这里data是json对象，直接赋值在div可能没效果，需要转型""String",或者遍历再拼接
													$
															.each(
																	data.result.future,
																	function(
																			index,
																			dw) {
																		$(
																				"#msg")
																				.append(
																						dw.date
																								+ ","
																								+ dw.direct
																								+ ","
																								+ dw.temperature
																								+ ","
																								+ dw.weather
																								+ "<br/>");
																	});
												}
											},
											dataType : "json"

										});

							});

		})
	</script>
</body>
</html>